<template>
  <div class="box">
    <el-card v-loading="loading">
      <el-row>
        <el-col :span="24">
          <div class="title">{{ mainTitle }}</div>
        </el-col>
        <el-col :span="16" style="font-size: 14px; line-height: 32px">
          <span style="margin-right: 24px">发布时间：{{ time }}</span>
          <span>发布人：{{ user }}</span>
        </el-col>
        <el-col :span="8">
          <div style="text-align: right">
            <el-button
              type="primary"
              @click="handlePass"
              v-show="this.$route.query.type === '1'"
              >通过
            </el-button>
            <el-button
              type="danger"
              @click="handleReject"
              v-show="this.$route.query.type === '1'"
              >驳回
            </el-button>
            <el-button @click="handleBack">返回</el-button>
          </div>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <div v-html="content"></div>
      <el-row v-show="fileList.length > 0" style="font-size: 14px">附件</el-row>
      <el-row v-show="fileList.length > 0">
        <el-col
          :span="24"
          v-for="item in fileList"
          :key="item.attachmentId"
          style="padding: 12px 0 12px 12px"
        >
          <el-link type="primary" @click="handleDownload(item.filePath)"
            >{{ item.fileName }}
          </el-link>
        </el-col>
      </el-row>
      <!--      <el-row style="font-size: 14px">图片：</el-row>-->
      <!--      <el-row>-->
      <!--        <el-col :span="24" style="padding: 12px 0 12px 12px">-->
      <!--          <el-image-->
      <!--              style="width: 400px; height: 266px"-->
      <!--              :src="filePic"-->
      <!--              :preview-src-list="filePicArr"-->
      <!--          >-->
      <!--          </el-image>-->
      <!--        </el-col>-->
      <!--      </el-row>-->
    </el-card>
  </div>
</template>

<script>
// import AddConfigure from "./AddConfigure.vue";
// import AddContent from "./AddContent.vue";
// import AddAnnexes from "./AddAnnexes.vue";
// import { getModuleListApi } from "@/api/modules/modules.api";
//
// import { insertArticleApi } from '@/api/modules/article.api'
// import { quillEditor } from "vue-quill-editor";
// import { operationArticleApi } from "@/api/modules/article.api";
import { mapMutations } from "vuex";
import { getHonorRollDetailApi } from "@/api/modules/honor.api";
import { approvePass, approveReject } from "@/api/modules/approve.api";

export default {
  data() {
    return {
      type: "0",
      visible: false,
      loading: true,
      content: "",
      mainTitle: "",
      time: "",
      user: "",
      fileList: [],
    };
  },
  mounted() {
    this.getDetail(this.$route.query.id);
  },
  methods: {
    ...mapMutations("base", ["setBreadcrumb"]),
    async getDetail(id) {
      if (id) {
        const res = await getHonorRollDetailApi(id);
        this.mainTitle = res.name;
        this.time = res.updateDate;
        this.user = res.userName;
        this.content = res.content;
        this.loading = false;
      }
    },
    handleDownload(path) {
      window.open(path);
    },
    handleBack() {
      if (this.$route.query.type === "1") {
        this.$router.push({ path: "/approval/list" });
        this.setBreadcrumb([
          {
            name: "审批管理",
            path: "/approval",
          },
          {
            name: "我的待办",
            path: "/approval/list",
          },
        ]);
      } else {
        this.$router.push({ path: "/writings/honor" });
        this.setBreadcrumb([
          {
            name: "文章管理",
            path: "/writings",
          },
          {
            name: "光荣榜",
            path: "/writings/honor",
          },
        ]);
      }
    },
    async handlePass() {
      await approvePass({ id: this.$route.query.approveId });
      this.$message({
        message: "成功",
        type: "success",
      });
      await this.$router.push({ path: "/approval/list" });
      this.setBreadcrumb([
        {
          name: "审批管理",
          path: "/approval",
        },
        {
          name: "我的待办",
          path: "/approval/list",
        },
      ]);
    },
    async handleReject() {
      await approveReject({ id: this.$route.query.approveId });
      this.$message({
        message: "成功",
        type: "success",
      });
      await this.$router.push({ path: "/approval/list" });
      this.setBreadcrumb([
        {
          name: "审批管理",
          path: "/approval",
        },
        {
          name: "我的待办",
          path: "/approval/list",
        },
      ]);
    },
  },
};
</script>
<style scoped>
.box {
  height: calc(100vh - 60px - 50px - 24px);
  overflow: auto;
}

.title {
  font-size: 36px;
  text-align: center;
  margin-bottom: 36px;
}
</style>
